import react, { useState } from 'react'
import { Document, Page, pdfjs } from 'react-pdf'
import styles from './pdfview.less'

pdfjs.GlobalWorkerOptions.workerSrc = `https://cdn.bootcdn.net/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`

const PDFView = ({ file, fileType }) => {
    let [totalPage, setTotalPage] = useState(1)

    function onDocumentLoadSuccess({ numPages }) {
        setTotalPage(numPages)
    }

    return <>
        <div className={styles.view}>
            <Document
                file={file}  //文件路径
                onLoadSuccess={onDocumentLoadSuccess} //成功加载文档后调用
                renderMode="svg"   //定义文档呈现的形式 
                options={{
                    cMapUrl: `//cdn.jsdelivr.net/npm/pdfjs-dist@${pdfjs.version}/cmaps/`,
                    cMapPacked: true,
                    disableWorker: true,
                }}
            >
                {
                    new Array(totalPage).fill('').map((item, index) => {
                        return <Page key={index} pageNumber={index + 1} scale={fileType == 'ppt' || fileType == 'pptx' ? 1 : 96/72} />
                    })
                }
            </Document>
        </div>
    </>
}

export default PDFView;
